<!DOCTYPE html>
<html>
  <head>
    <title>根据经纬度显示坐标点展示对应的图片</title>
    <link rel="stylesheet" href="../css/ol.css" />
    <script type="text/javascript" src="../js/ol.js" ></script>
  </head>
  <body>
    <div id="map" class="map">
    	 <div id="mouse-position"></div>
    </div>
    <script>
       //自定义geoserver中wms的地址。
      var maplayer= new ol.layer.Image({
				source: new ol.source.ImageWMS({
					url: 'http://localhost:8080/geoserver/CN/wms',  
					params: {'LAYERS': 'layers:RailWay','VERSION':'1.1.0'}, 
					 serverType: 'geoserver'  
				})
			});
			//采用自己提供的地图
	var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      var map = new ol.Map({
        layers: [
          raster
        ],
        target: document.getElementById('map'),
        view: new ol.View({
          center: [0, 0],
          zoom: 3
        })
      });
        //设置鼠标指针所在位置的经纬度坐标
      var mousePositionControl=new ol.control.MousePosition({
            coordinateFormat:ol.coordinate.createStringXY(4),
            projection:"EPSG:4326",
            className:"custom-mouse-position",
            target:document.getElementById("mouse-position"),
            undefinedHTML:"&nbsp"
        });
        map.addControl(mousePositionControl);
    </script>
  </body>
</html>